<template>
  <div class="category">
    <goback :getName='goName' :getURL ="goType"></goback>
    <!-- 搜索 -->
    <section class="seach">
      <input type="text" placeholder="请输入商品名称" v-model="seachCnt">
      <section @click="seach">
        <img src="../../assets/other/seach.png" alt="" >
      </section>
    </section>
    <!-- 商品区 -->
    <section class="goods">
      <section class="goods_category">
        <router-link v-for="categoryList in categoryList" :key="categoryList.id" href="#tabl" to="">
          {{categoryList.name}}
        </router-link>
      </section>
      <section class="goods_list">

      </section>
    </section>
  </div>
</template>
<script>
  import goback from '../../components/goback'
  export default {
    components:{ goback },
    data () {
      return {
        goName: "分类", // 导航名称
        goType: '/my', // 导航返回页面，如返回上一级则为空
        seachCnt: '', // 搜索框内容
        categoryList: [
          {
            id: 0,
            name: '图书杂志'
          },
          {
            id: 1,
            name: '礼品卡券'
          },
          {
            id: 2,
            name: '家居生活'
          },
          {
            id: 3,
            name: '电子数码'
          },
          {
            id: 4,
            name: '公益收藏'
          },
          {
            id: 5,
            name: '服饰箱包'
          },
          {
            id: 6,
            name: '美妆个肤'
          },
          {
            id: 7,
            name: '美食美酒'
          }
        ]
      }
    },
    methods: {
      seach () {
        let vm = this
        console.log(vm.seachCnt)
      }
    }
  }
</script>
<style scoped>
/* 搜索框 */
.seach{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: .5rem 1rem;
  background-color: white;
}
.seach input{
  padding: .5rem;
  border-radius: 1rem;
  border: 1px solid #aaa;
  outline: none;
  width: 80%;
}
.seach section{
  width: 1.5rem;
}
.seach section img{
  width: 100%;
}
/* 商品区 */
.goods{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
/* 左边菜单 */
.goods_category{  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.goods_category a{
  position: relative;
  padding: 1rem;
  background:rgba(246,246,246,1);
}
</style>
